<!-- 创建时间: 2019年10月29日 星期二 12:31 -->
<template>
    <div class="UpdateUserPass_container">
        <div class="mui-input-group">
            <div class="mui-input-row">
                <label>旧密码</label>
                <input
                    type="password"
                    class="mui-input-password"
                    v-model="oldPass"
                    placeholder="请输入密码"
                />
            </div>
            <div class="mui-input-row">
                <label>新密码</label>
                <input
                    type="password"
                    class="mui-input-password"
                    v-model="newPass"
                    placeholder="请输入密码"
                />
            </div>
            <div class="mui-input-row">
                <label>确认新密码</label>
                <input
                    type="password"
                    class="mui-input-password"
                    v-model="confirmNewPass"
                    placeholder="请输入密码"
                />
            </div>
            <div class="mui-input-row">
                <label>手机号</label>
                <input
                    type="tel"
                    v-model="phoneNumber"
                    class="mui-input-clear"
                    placeholder="请输入手机号"
                    ref="phoneNumber"
                />
            </div>
            <div class="mui-input-group regCode">
                <label style="display:none">验证码</label>
                <input
                    type="password"
                    :value="captcha"
                    class="mui-input-password"
                    style="display:none"
                />
                <mt-field label="验证码" v-model="captcha">
                    <button
                        type="button"
                        class="mui-btn mui-btn-outlined"
                        @click="getSMS"
                        ref="getSMS"
                    >{{ getVerBtnText }}</button>
                </mt-field>
            </div>

            <div class="mui-button-row">
                <button type="button" class="mui-btn mui-btn-primary" @click="confirm($event)">确认</button>
                <button type="reset" class="mui-btn mui-btn-danger" @click="cancel">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import mui from "../../lib/MUI/dist/js/mui.js";
const Base64 = require("js-base64").Base64;

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            // 获取短信控制定时器
            getSMS_Dt: "",
            // 验证码
            captcha: "",
            // 计时显示的文本
            getVerBtnText: "获取验证码",
            // 旧密码
            oldPass: "",
            // 新密码
            newPass: "",
            // 确认新密码
            confirmNewPass: "",
            // 手机号
            phoneNumber: ""
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 获取短信验证码
        getSMS() {
            if (this.phoneNumber == "" || this.phoneNumber.trim() == "") {
                mui.alert("请输入手机号");
                this.$refs.phoneNumber.focus();
                return;
            }
            this.$refs.getSMS.setAttribute("disabled", "disabled");
            var second = 120;
            this.getSMS_Dt = setInterval(() => {
                second--;
                this.getVerBtnText = "获取验证码(" + second + ")";
                if (second <= 0) {
                    clearInterval(this.getSMS_Dt);
                    this.getVerBtnText = "获取验证码";
                    this.$refs.getSMS.removeAttribute("disabled");
                }
            }, 1000);

            this.$http
                .post("getSMS", {
                    phoneNumber: this.phoneNumber
                })
                .then(response => {
                    mui.alert(response.bodyText);
                    this.getVerBtnText = "获取验证码";
                    this.$refs.getSMS.removeAttribute("disabled");
                });
        },
        // 确定
        confirm(el) {
            var check = true;
            mui(".UpdateUserPass_container input").each(function() {
                //若当前input为空，则alert提醒
                if (!this.value || this.value.trim() == "") {
                    var label = this.previousElementSibling;
                    mui.alert(label.innerText + "不允许为空");
                    check = false;
                    return false;
                }
            }); //校验通过，继续执行业务逻辑
            if (check) {
                // 判断用户是否获取了验证码
                if (this.$refs.getSMS.getAttribute("disabled") == null) {
                    mui.alert("请先获取验证码");
                    return;
                }
                console.log("可以进行修改密码操作的业务逻辑...");
                var info = {
                    oldPass: this.oldPass,
                    newPass: this.newPass,
                    confirmNewPass: this.confirmNewPass,
                    phoneNumber: this.phoneNumber,
                    captcha: this.captcha
                };
                el.srcElement.innerText = "处理中...";
                el.srcElement.disabled = true;
                this.$http
                    .post("updateUserPass", {
                        info: Base64.encode(JSON.stringify(info))
                    })
                    .then(response => {
                        if (response.bodyText == "success") {
                            sessionStorage.removeItem("cubelibrarytoken");
                            localStorage.removeItem("autoremember");
                            mui.alert("登录失效，请重新登录");
                            this.$router.push({
                                path: "/"
                            });
                        } else {
                            mui.alert(response.bodyText);
                            this.$router.push({
                                path: this.$route.query.redirect
                                    ? this.$route.query.redirect
                                    : "/"
                            });
                        }
                    });
            }
        },
        // 取消
        cancel() {
            this.$router.push({
                path: this.$route.query.redirect
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.UpdateUserPass_container {
    margin-top: 45px;
    position: absolute;
    width: 100%;
}
a:hover,
a:focus {
    color: #333333;
    font-weight: bold;
    text-decoration: none;
}
</style>